<template>
  <div class="el-select custom-dropdown">
    <div v-if="showDropdown" class="overlay" @click="closeDropdown"></div>

    <div class="el-select__wrapper custom-select" @click="toggleDropdown">
      <div class="el-select__selection">
        <div v-if="!selectedLabel && !modelValue" class="el-select__selected-item el-select__placeholder is-transparent">
          <span>请选择</span>
        </div>
        <div v-else class="el-select__selected-item el-select__placeholder is-transparent" style="text-align: center">
          <el-icon>
            <component :is="selectedLabel" />
          </el-icon>
        </div>
      </div>
      <div class="el-select__suffix">
        <i class="el-icon el-select__caret el-select__icon">
          <ArrowDown />
        </i>
      </div>
    </div>

    <transition name="el-zoom-in-top">
      <div v-show="showDropdown" class="dropdown-list">
        <el-row>
          <el-col :span="6" v-for="icon in currentPageIcon" :key="icon" style="text-align: center">
            <el-button @click="handleSelect(icon)">
              <el-icon>
                <component :is="icon" />
              </el-icon>
            </el-button>
          </el-col>
        </el-row>dang

        <el-pagination
            :total="total"
            :default-current-page="page"
            :page-size="16"
            layout="prev, pager, next"
            :pager-count="3"
            size="small"
            @current-change="changePage"
            style="margin:10px"
            background
        />
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['update:modelValue'])

const selectedLabel = ref('')
const showDropdown = ref(false)

const iconList = ref([])
const currentPageIcon = ref([])
const total = ref(0)
const page = ref(1)

const loadIcon = () => {
  const iconKeys = Object.keys(ElementPlusIconsVue)
  total.value = iconKeys.length
  iconList.value = iconKeys
  getPageIcon()
}

const getPageIcon = () => {
  const start = (page.value - 1) * 16
  const end = start + 16
  currentPageIcon.value = iconList.value.slice(start, end)
}

const toggleDropdown = () => {
  showDropdown.value = !showDropdown.value
}

const handleSelect = (icon) => {
  selectedLabel.value = icon
  emit('update:modelValue', icon)
  showDropdown.value = false
}

const changePage = (currentPage) => {
  page.value = currentPage
  getPageIcon()
}

const closeDropdown = () => {
  showDropdown.value = false  // 点击遮罩层时关闭下拉框
}

onMounted(() => {
  loadIcon()
})
</script>

<style scoped>
.custom-dropdown {
  position: relative;
}

.custom-select {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dropdown-list {
  position: absolute;
  top: 111%;
  left: 0;
  width: 100%;
  background-color: var(--el-bg-color-overlay);
  border: 1px solid var(--el-border-color-lighter);
  box-shadow: var(--el-box-shadow-light);
  border-radius: var(--el-border-radius-base);
  z-index: 10;
  max-height: 200px;
  overflow-y: auto;
}

/* 全屏遮罩层样式 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);  /* 半透明黑色背景 */
  z-index: 9;  /* 确保遮罩层在下拉框和页面内容之上 */
}

</style>
